<template>
  <el-dialog class="filter-item" :visible.sync="isShow" :before-close="handleCancelModal" :close-on-click-modal="false" :show-close="false" width="380px">
    <div slot="title" style="text-align: center">
      <el-button-group>
        <el-button :type="current === 1 ? 'primary' : 'default'" :plain="current === 2" size="mini" @click="current = 1">筛选条件自定义隐藏</el-button>
        <el-button :type="current === 2 ? 'primary' : 'default'" :plain="current === 1" size="mini" @click="current = 2">数据展示列自定义隐藏</el-button>
      </el-button-group>
    </div>
    <!-- 数据表单 -->
    <template>
      <div style="height: 360px;overflow-y: scroll">
        <el-tree v-show="current === 1" ref="search" :data="search" :props="defaultProps" node-key="id" show-checkbox />
        <el-tree v-show="current === 2" ref="fields" :data="fields" :props="defaultProps" node-key="id" show-checkbox />
      </div>
    </template>
    <!-- 提交按钮 -->
    <div slot="footer" class="dialog-footer" style="text-align: center; display: flex; justify-content: space-between">
      <el-button size="small" :disabled="isSubmit" style="margin-left: 30px" @click="handleCancelModal">取 消</el-button>
      <el-button type="primary" size="small" :loading="isSubmit" style="margin-right: 30px" @click="handleSubmitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'TransferSave',
  props: {
    'isShow': { type: Boolean, default: true },
    'fieldItem': { type: Array, default: null },
    'searchItem': { type: Array, default: null }
  },
  data: function() {
    return {
      isSubmit: false,
      current: 1,
      defaultProps: {
        label: 'name'
      }
    }
  },
  computed: {
    search() {
      return [
        { id: 1, name: '场次' },
        { id: 2, name: '标号' },
        { id: 3, name: '聚星字号' },
        { id: 4, name: '货主' },
        { id: 5, name: '备注搜索' }
      ]
    },
    fields() {
      return [
        { id: 1, name: '标号' },
        { id: 2, name: '聚星字号' },
        { id: 3, name: '图片' },
        { id: 4, name: '片数' },
        { id: 5, name: '重量' },
        { id: 6, name: '位置' },
        { id: 7, name: '底价' },
        { id: 8, name: '货主' },
        { id: 9, name: '备注' },
        { id: 10, name: '最高出价' },
        { id: 11, name: '最低出价' },
        { id: 12, name: '最高出价会员号' },
        { id: 13, name: '最高出价姓名' },
        { id: 14, name: '出价详情' }
      ]
    }
  },
  mounted: function() {
    this.$nextTick(() => {
      this.$refs.fields.setCheckedKeys(this.fieldItem)
      this.$refs.search.setCheckedKeys(this.searchItem)
    })
  },
  methods: {
    handleSubmitForm() {
      localStorage.setItem('bid-summary-field', JSON.stringify(this.$refs.fields.getCheckedKeys()))
      localStorage.setItem('bid-summary-search', JSON.stringify(this.$refs.search.getCheckedKeys()))
      this.handleCancelModal(true)
    },
    // 取消弹出框
    handleCancelModal(refresh = false) {
      this.$emit('on-cancel-modal', 'filterModal', refresh)
    }
  }
}
</script>

<style lang="scss">
.filter-item {
  .el-form-item {
    margin-bottom: 6px;
  }
  .el-dialog__body {
    padding: 5px 20px;
  }
  .el-transfer-panel__header, .el-transfer-panel__header, .el-checkbox {
    height: 34px !important;
    line-height: 34px !important;
    .el-checkbox__label {
      font-size: 14px !important;
    }
  }
  .el-transfer__buttons {
    padding: 0 10px !important;
    button {
      padding: 5px 15px;
    }
  }
}
</style>
